<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- indexOf()方法可返回某个指定的字符串在字符串中首次出现的位置
        该方法从头到尾的检索字符串stringObject,看他是否含有子字符串的fromindex处或字符串的开头(没有指定fromindex时)。如果找到一个   searchavlue,则返回searchvalue的第一次出现的位置。stringObject中字符位置是从0开始的，如果返回为-1这表示没有找到该字符串
    
     -->
    <div>
        <!-- w3c实例 -->
        <p id="demo">点击按钮可以查看苹果在数组的索引</p>
        <button type="button" onclick="abtn()">点击查询</button><br>

        <!-- w3c实例 -->
        <button type="button" id="obtn" onclick="Obtn()">
            使用indexOf()点击查询数组中的字符串
        </button>
        <button type="button" id="lbtn" onclick="Lbtn()">
            使用lastIndexOf点击查询数组中的字符串
        </button>
        <script>
            function abtn() {
                var fruits = ["荔枝", "菠萝", "梨子"]
                var a = fruits.indexOf("苹果");
                var x = document.getElementById("demo");
                x.innerHTML = a;
                if (x.innerHTML == -1) {
                    alert("这就说明数组中没有苹果");
                    x.innerHTML = "没有苹果";
                }
            }
            // indexOf是从头到尾匹配数组中的索引
            // 语法:indexOf("要检索的数组中的元素",这个是整数表示从索引几开始搜索)

            var cn = ["cn1", "cn2", "cn3", "cn4"];
            var obtn = document.getElementById("obtn");

            function Obtn() {
                alert(cn.indexOf("cn1"));
            }

            // indexOf是从尾到头匹配数组中的索引
            // 语法:indexOf("要检索的数组中的元素",这个是整数表示从尾索引几向前开始搜索 取值范围0~array.lentgh-1)
            var ln = ["ln1", "ln2", "ln3", "ln4"];
            var lbtn = document.getElementById("lbtn");

            function Lbtn() {
                alert(ln.lastIndexOf("ln3", ln.length - 1));
            }
        </script>
    </div>


</body>

</html>